<template>
    <view>
        <view class="wanlgroups-user-container">
            <!-- 主体 -->
            <view class="wanlgroups-user-container__list bg-white">
                <view class="main">
                    <view
                        class="list"
                        v-for="(data, keys) in navList[currentId].dataList"
                        :key="keys"
                    >
                        <view class="item" @click="goDetail(data.id)">
                            <view
                                v-if="data.state === 'normal'"
                                class="examine radius-bock"
                                :style="{
                                    backgroundImage:
                                        'url(' + 'https://same.ascetic.top/' + data.images[0] + ')',
                                }"
                                @tap="onFind(data)"
                            >
                                <view
                                    class="cover radius-bock"
                                    :style="{
                                        backgroundImage:
                                            'url(' +
                                            'https://same.ascetic.top/' +
                                            data.images[0] +
                                            ')',
                                    }"
                                >
                                </view>

                                <view
                                    v-if="data.type === 'video'"
                                    class="state padding-sm text-white text-xxxl"
                                >
                                    <text class="wlIcon-video" />
                                </view>
                            </view>

                            <view
                                v-else
                                class="examine radius-bock"
                                @tap="uni.showToast(`内容${stateText[data.state].text}, 无法查看`)"
                            >
                                <image class="cover" :src="data.images[0]" mode="scaleToFill" />
                                <view class="state flex justify-center align-center">
                                    <view
                                        v-if="data.state"
                                        class="text-xxl text-center"
                                        :style="{ color: stateText[data.state].color }"
                                    >
                                        <text :class="stateText[data.state].icon" />
                                        <view class="text-df">
                                            {{ stateText[data.state].text }}
                                        </view>
                                    </view>
                                </view>
                            </view>

                            <view class="padding-xs text-bold5">
                                <view class="text-cut-2">
                                    <view
                                        class="cu-tag sm radius margin-right-xs"
                                        :class="[typeList[data.type]]"
                                    >
                                        {{ data.type_text }}
                                    </view>
                                    {{ formatHtml(data.content) }}
                                </view>
                            </view>

                            <view class="flex wanl-gray text-min padding-lr-xs justify-between">
                                <text> {{ data.createtime }} 发布 </text>
                                <text class="text-red margin-left-xs" @click.stop="handleDel(keys)">
                                    删除
                                </text>
                            </view>
                        </view>
                    </view>
                    <view style="margin: 0 auto; text-align: center; width: 100vw">
                        <uni-load-more
                            :status="navList[currentId].loadingType"
                            :content-text="contentText"
                        />
                    </view>
                </view>
                <view class="fabu" @click="handleFabu"> + 发布 </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState } from "vuex";
import { BaseUrl } from "../../../utils/req.js";
export default {
    data() {
        return {
            BaseUrl,
            find_user: null,
            isMyfind: false,
            loadingFollow: false,
            modalName: null,
            scrollAnimation: 300,
            userData: {
                user_no: "",
                user: {
                    avatar: "",
                    nickname: "加载中..",
                },
                follow: 0,
                fans: 0,
                likes: 0,
                praised: 0,
                color: "#e9dacd",
                image: "",
                isFollow: 0,
            },
            stateText: {
                publish: {
                    icon: "wlIcon-jiazai wlIconfont-spin",
                    text: "发布中",
                    color: "#fff",
                },
                examine: {
                    icon: "wlIcon-shouhoufuwu-zidongpingjia",
                    text: "待审核",
                    color: "#e6442b",
                },
                hazard: {
                    icon: "wlIcon-zhuyidapx",
                    text: "内容违规",
                    color: "#e6442b",
                },
                transcoding: {
                    icon: "wlIcon-jiazai1 wlIconfont-spin",
                    text: "转码中",
                    color: "#fff",
                },
                screenshot: {
                    icon: "wlIcon-tupian wlIconfont-spin",
                    text: "生成封面中",
                    color: "#fff",
                },
            },
            currentId: 0,
            typeList: {
                new: "bg-gradual-yellow",
                live: "wanl-bg-orange",
                want: "bg-gradual-green",
                activity: "bg-gradual-orange",
                show: "wanl-bg-pink",
                video: "wanl-bg-pink",
            },
            navList: [
                {
                    type: "works",
                    type_text: "作品",
                    dataList: [],
                    loadingType: "more",
                    current_page: 1,
                },
                {
                    type: "likes",
                    type_text: "喜欢",
                    dataList: [],
                    loadingType: "more",
                    current_page: 1,
                },
            ],
            contentText: {
                contentdown: " ",
                contentrefresh: "正在疯狂加载中...",
                contentnomore: "我是有底线的",
            },
        };
    },
    computed: {
        ...mapState(["common"]),
    },
    onLoad(query) {
        // 判断是否小程序来源 1.1.9升级
        if (query.hasOwnProperty("scene")) {
            let scene = decodeURIComponent(query.scene);
            scene = this.$wanlshop.getParam(scene);
            this.find_user = scene.id;
        } else {
            if (query.hasOwnProperty("id")) {
                this.find_user = query.id;
            }
        }
        // 加载 Api
        this.loadData();
    },
    // 下拉刷新
    onReachBottom() {
        this.loadFindData();
    },
    onPageScroll(e) {},
    //触底加载
    onReachBottom() {
        // this.navList[this.currentId].loadingType = "loading";
        this.loadData();
    },
    methods: {
        //点击跳转到商品详情
        goDetail(id) {
            uni.navigateTo({
                url: `/dabai/pages/zcDetails/zcDetails?id=${id}`,
            });
        },
        //点击发布按钮去发布页面
        handleFabu() {
            uni.navigateTo({
                url: "/upRelease/fabu/fabu",
            });
        },
        loadData() {
            this.$request
                .post("/api/wanlshop.find.user/userInfo", {
                    id: this.find_user,
                })
                .then((res) => {
                    if (res.data.user_id === this.$store.state.user.id) {
                        this.isMyfind = true;
                    }
                    this.userData = res.data;
                    this.loadFindData();
                });
        },
        //获取列表
        loadFindData(source) {
            //这里是将订单挂载到tab列表下
            let navItem = this.navList[this.currentId];
            //判断是否最后一页
            if (navItem.loadingType == "noMore") {
                console.log("noMore");
                return;
            }
            //tab切换只有第一次需要加载数据
            if (source === "tabChange" && navItem.loaded === true) {
                return;
            }
            //防止重复加载
            if (navItem.loadingType === "loading") {
                return;
            }
            // navItem.loadingType = "loading";
            // let type =
            //     navItem.type === "works" ? (this.isMyfind ? "myfind" : navItem.type) : navItem.type;
            // 获取列表
            this.$request
                .get("/api/wanlshop.find.find/getList", {
                    type: "works",
                    user_no: this.userData.user_no,
                    page: navItem.current_page,
                })
                .then((res) => {
                    navItem.current_page = res.data.current_page; //当前页码
                    if (res.data.last_page == res.data.current_page) {
                        navItem.loadingType = "noMore";
                    } else {
                        navItem.loadingType = "more";
                        navItem.current_page++;
                    }
                    res.data.data.forEach((item) => {
                        navItem.dataList.push(item);
                    });
                    this.$set(navItem, "loaded", true);
                });
        },
        //删除当前商品
        async handleDel(index) {
            uni.showModal({
                content: "确定要删除此作品？",
                success: (res) => {
                    if (res.confirm) {
                        let data = this.navList[this.currentId].dataList;
                        this.$request
                            .post("/api/wanlshop.find.find/delData", {
                                id: data[index].id,
                            })
                            .then((del) => {
                                data.splice(index, 1);
                            });
                    }
                },
            });
        },
        editTheme(data) {
            this.request
                .post("/api/wanlshop.find.user/editTheme", {
                    data: data,
                })
                .then((res) => {
                    this.userData.image = res.data.image;
                    this.userData.color = res.data.color;
                });
        },
        // 格式化html
        formatHtml(content) {
            return content.replace(/<\/?.+?>/g, "").replace(/ /g, "");
        },
    },
};
</script>

<style lang="scss">
.text-red {
    text-align: right;
}
.fabu {
    border-radius: 60rpx;
    border: 2rpx solid #fff;
    padding: 20rpx 34rpx;
    font-size: 30rpx;
    color: #fff;
}

page {
    background-color: #ffffff;
}

.wanlgroups-user-container {
    &__head {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9;

        .background {
            position: absolute;
            left: 0;
            right: 0;
            z-index: 1;

            .bgcolor {
                width: 100%;
                height: 100%;
                // background-color: rgba(0, 0, 0, 0.4);
            }
        }

        .navigater {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            left: 0;
            right: 0;
            z-index: 9;
            padding-left: 25rpx;
            padding-right: 25rpx;
            /* #ifdef MP */
            padding-right: 200rpx;

            /* #endif */
            & > view {
                display: flex;
                align-items: center;
            }
        }
    }

    &__main {
        margin-top: 30rpx;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position-y: center;

        .text-white-agba {
            color: rgba(255, 255, 255, 0.9);
        }

        .head {
            padding: 0 30rpx;
            padding-bottom: 50rpx;
            background-color: #89cda3;

            .userinfo {
                display: flex;
                align-items: center;

                .cu-avatar {
                    width: 130rpx;
                    height: 130rpx;
                }
            }

            .findinfo {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .quantity {
                    display: flex;

                    .project {
                        width: 100rpx;
                        margin-right: 10rpx;
                        overflow: hidden;
                    }
                }
            }

            .shopinfo {
                display: flex;
                align-items: center;
                justify-content: space-between;

                &.solid-top {
                    &::after {
                        border-top: 1rpx solid rgba(255, 255, 255, 0.92);
                    }
                }

                .cu-avatar {
                    background-color: rgba(0, 0, 0, 0.1);
                    width: 65rpx;
                    height: 65rpx;
                }

                .subject {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .info {
                        & > view {
                            display: flex;
                            align-items: center;
                        }
                    }
                }
            }
        }
    }

    &__list {
        margin-top: 30rpx;
        border-radius: 24rpx 24rpx 0 0;
        padding-top: 2rpx;

        .questionbag {
            position: -webkit-sticky;
            position: sticky;
            top: 0 !important;
            z-index: 99;
            margin: 0 16rpx;
        }

        .main {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            padding: 0 20rpx;
            justify-content: space-between;

            .empty {
                padding-top: 100rpx;
                display: flex;
                justify-content: center;

                image {
                    width: 320rpx;
                    height: 320rpx;
                }
            }

            // .list {
            // display: flex;
            // flex-direction: row;
            // flex-wrap: wrap;
            // padding: 0 16rpx;
            // justify-content: space-between;
            // flex: 0 0 calc((100% - 16rpx) / 2);
            .list {
                flex: 0 0 calc((100% - 16rpx) / 2);
            }

            .item {
                // width: 48%;
                margin-bottom: 40rpx;
                overflow: hidden;

                .examine {
                    height: 460rpx;
                    position: relative;

                    .cover {
                        height: 460rpx;
                        background-size: cover;
                        background-position: center;
                        background-repeat: no-repeat;
                    }

                    .state {
                        position: absolute;
                        top: 0;
                        right: 0;
                        left: 0;
                        bottom: 0;
                        background-color: rgba(0, 0, 0, 0.2);
                    }
                }
            }
            // }
        }
    }

    &__modal {
        .praised {
            .cu-dialog {
                width: 70%;
                overflow: hidden;

                image {
                    height: 100%;
                }
            }
        }
    }
}
.fabu {
    border-radius: 60rpx;
    // border: 2rpx solid #fff;
    padding: 30rpx 50rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #89cda3;
    position: fixed;
    bottom: 8%;
    left: 50%;
    transform: translate(-50%, 0);
}
</style>
